$(document).ready(function () {
  initPhoneForm()
})

// 步骤 0 手机号验证 1 重置密码 2 立即登录
var stepNum = 0

// 下一步
function nextStep() {
  if (stepNum == 0) {
    var formData = $('#phoneForm').serializeArray()
    console.log('phoneForm1', formData);
    console.log('校验1', validate('#phoneForm'));

    if (validate('#phoneForm')) {
      stepNum++;
      $('.form-item-box.step1').hide()
      $('.form-item-box.step2').removeClass('hide')
      $('.form-item-box.step2').show()

      $('.step-item.step1').removeClass('select')
      $('.step-item.step2').addClass('select')
      initPasswordForm()
    }
  } else if (stepNum == 1) {
    var formData = $('#pwdForm').serializeArray()
    console.log('pwdForm', formData);
    console.log('校验1', validate('#pwdForm'));

    if (validate('#pwdForm')) {
      stepNum++;
      $('.step-item.step2').removeClass('select')
      $('.step-item.step3').addClass('select')

      $('.form-item-box.step2').hide()
      $('.form-item-box.step3').removeClass('hide')
      $('.form-item-box.step3').show()

      $('.operate-btn .next-step').hide()
      $('.operate-btn .sign-in-now').removeClass('hide')
      $('.operate-btn .sign-in-now').show()
    }
  }
}

// 立即登录
function signInNow() {
  window.location.href = '/pages/login.html'
}

// init 表单
function initPhoneForm() {
  // 校验
  $('#phoneForm').bootstrapValidator({
    message: ' ',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      // 名称校验
      userName: {
        validators: {
          notEmpty: {
            message: '登录名不能为空！'
          },
          stringLength: {
            min: 4,
            max: 16,
            message: '登录名必须大于4位！'
          }
        }
      },
      // 手机号校验
      phoneNumber: {
        validators: {
          notEmpty: {
            message: '手机号不能为空！'
          },
          regexp: {
            regexp: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号！'
          }
        }
      },
      // 验证码校验
      codeNumber: {
        validators: {
          notEmpty: {
            message: '验证码不能为空！'
          },
          stringLength: {
            min: 6,
            max: 6,
            message: '请输入正确的验证码！'
          }
        }
      }
    }
  });
}

function initPasswordForm() {
  // 校验
  $('#pwdForm').bootstrapValidator({
    message: ' ',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      // 新密码校验
      newPwd: {
        validators: {
          notEmpty: {
            message: '新密码不能为空！'
          },
          regexp: {
            regexp: /^.*(?=.{7,16})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/,
            message: '密码规则是 长度为：8-16位字符，同时包括数字、大小写字母和特殊字符（!@#$%^&*?）'
          }
        }
      },
      // 确认密码
      confirmPwd: {
        validators: {
          notEmpty: {
            message: '确认密码不能为空'
          },
          callback: {
            message: '两次输入的密码不一致！',
            callback: function (value, validator) {
              if (!value) {
                return true
              }
              if ($('#pwdForm input[name="newPwd"]').val() === value) {
                return true
              } else {
                return false
              }
            }
          }
        }
      }
    }
  });
}

// 验证
function validate(id) {
  $(id).data('bootstrapValidator').validate()
  $(id).bootstrapValidator('validate');

  var ispass = false
  ispass = $(id).data('bootstrapValidator').isValid()

  if (!ispass) {
    //没有通过校验
    console.log('未通过');
  } else {
    //通过校验，可进行提交等操作
    console.log('已通过');
  }

  return ispass
}

/** 上传的图片 */
var imgs = [];
/** 图片上传 */
function uploadImage(e) {
  var fileList = e.files;
  for (var i = 0; i < fileList.length; i++) {
    imgs.push(fileList[i])
  }

  if (fileList) {
    [].forEach.call(fileList, readAndPreview)
  }

  if (!fileList.length) {
    $.message({
      type: 'error',
      message: '请选择图片'
    })
    return
  }


  /** 渲染图片 */
  function readAndPreview(file) {
    // 确保 `file.name` 符合我们要求的扩展名
    if (/\.(jpe?g)$/i.test(file.name)) {
      //这里是读取到input返回出来的fileList中文件
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        var imgDom = new Image();
        var result = this.result;
        imgDom.className = 'img-c';

        imgDom.title = file.name;
        imgDom.style = 'width: 100%; height: 100%;';
        imgDom.onclick = function () {
          imagePreview(result);
        }

        imgDom.src = result;

        $('#picturePreview').html('');
        $('#picturePreview').append(imgDom);
      }, false)

      //调用readAsDataURL()方法拿到result
      reader.readAsDataURL(file);
    } else {
      $.message({
        type: 'error',
        message: '请选择正确格式的图片'
      })
    }
  }
}